<m-notice [icon]="'flaticon-exclamation m--font-primary'">
	For more info please check the components's official demos & documentation 
	<a class="m-link" href="https://material.angular.io/components/slider/overview" target="_blank">demos & documentation</a>
</m-notice>

<div class="row">
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleBasicSlider">
			<div class="m-section">
				<span class="m-section__sub">
					<code>mat-slider</code> allows for the selection of a value from a range via mouse, touch, or keyboard, similar to
					<code>&lt;input type="range"&gt;</code>.
				</span>
				<div class="m-separator m-separator--dashed"></div>
				<div class="example-container">
					<mat-slider></mat-slider>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleChangeEvent">
			<div class="m-section">
				<span class="m-section__sub">
					<code>@Output() change: EventEmitter&lt;MatSliderChange&gt;</code> Event emitted when the slider value has changed.
				</span>
				<div class="m-separator m-separator--dashed"></div>
				<div class="example-container">
					<mat-slider (change)="changeSlider()" [(ngModel)]="myValue" min="0" max="100" step="1"></mat-slider>
					<div class="m-separator m-separator--dashed" *ngIf="myValue"></div>
					<span *ngIf="myValue">Selected: <mark>{{ myValue }}</mark>%</span>
				</div>
			</div>
		</m-material-preview>
	</div>
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleConfigurableSlider">
			<div class="m-section">
				<div class="example-container">
					<section class="example-section">
						<mat-form-field class="example-margin">
							<input matInput type="number" placeholder="Value" [(ngModel)]="value">
						</mat-form-field>
						<mat-form-field class="example-margin">
							<input matInput type="number" placeholder="Min value" [(ngModel)]="min">
						</mat-form-field>
						<mat-form-field class="example-margin">
							<input matInput type="number" placeholder="Max value" [(ngModel)]="max">
						</mat-form-field>
						<mat-form-field class="example-margin">
							<input matInput type="number" placeholder="Step size" [(ngModel)]="step">
						</mat-form-field>
					</section>
					<div class="m-separator m-separator--dashed"></div>
					<section class="example-section">
						<mat-checkbox class="example-margin" [(ngModel)]="showTicks">Show ticks</mat-checkbox>
						<mat-checkbox class="example-margin" [(ngModel)]="autoTicks" *ngIf="showTicks">
							Auto ticks
						</mat-checkbox>
						<mat-form-field class="example-margin" *ngIf="showTicks && !autoTicks">
							<input matInput type="number" placeholder="Tick interval" [(ngModel)]="tickInterval">
						</mat-form-field>
					</section>
					<div class="m-separator m-separator--dashed"></div>
					<section class="example-section">
						<mat-checkbox class="example-margin" [(ngModel)]="thumbLabel">Show thumb label</mat-checkbox>
					</section>
					<div class="m-separator m-separator--dashed"></div>
					<section class="example-section">
						<mat-checkbox class="example-margin" [(ngModel)]="vertical">Vertical</mat-checkbox>
						<mat-checkbox class="example-margin" [(ngModel)]="invert">Inverted</mat-checkbox>
					</section>
					<div class="m-separator m-separator--dashed"></div>
					<section class="example-section">
						<mat-checkbox class="example-margin" [(ngModel)]="disabled">Disabled</mat-checkbox>
					</section>
					<div class="m-separator m-separator--dashed"></div>
					<h5>Result</h5>
					<mat-slider class="example-margin" [disabled]="disabled" [invert]="invert" [max]="max" [min]="min" [step]="step" [thumbLabel]="thumbLabel" [tickInterval]="tickInterval" [(ngModel)]="value" [vertical]="vertical">
					</mat-slider>
				</div>
			</div>
		</m-material-preview>
	</div>
</div>